<template>
  <div class="task-submit-container-padding">
    <div v-show="showTopic">
      <TopicSelect
        v-model="topicId"
        :type="4"
        :has-project="true"
        @change="topicChange"
      />
    </div>
    <component
      :is="type == 1 ? DevForm : ExtendForm"
      ref="componentRef"
      :topic-id="topicId"
      @change-show="changeShow"
    />
  </div>
</template>

<script setup>
  import TopicSelect from '@/components/topicSelect'
  import DevForm from './components/devForm'
  import ExtendForm from './components/ExtendForm'
  import { planTaskGet } from '@/api/project/approval/task'
  import '@wangeditor/editor/dist/css/style.css'

  const route = useRoute()

  const topicId = ref('')
  const showTopic = ref(true)
  const type = ref(1)
  const detailData = ref({})

  const componentRef = ref()

  const topicChange = (value) => {
    type.value = value.type == 1 ? 1 : 2
  }

  const changeShow = (visible) => {
    showTopic.value = visible
  }

  const initFormData = () => {
    planTaskGet({ id: route.query.id, getType: route.query.getType || 2 }).then(
      (res) => {
        if (res.code == 0 || res.code == 200) {
          let data = res.data
          data.projectPlanTaskInfo = data.projectPlanTaskInfo || data.baseInfo
          topicId.value = data.projectPlanTaskInfo.topicId
          type.value = data.projectPlanTaskInfo.taskType
          detailData.value = data
          nextTick(() => {
            componentRef.value.setFormData(detailData.value)
          })
        }
      }
    )
  }

  onMounted(() => {
    route.query.id && initFormData()
  })
</script>

<style lang="scss" scoped>
  .task-submit-container-padding {
    padding-bottom: 80px !important;
  }
</style>
